<template>
    <div class="emailPassword">
        <Header style="z-index:1025">
            <header-menu></header-menu>
        </Header>
        <div class="cont">
        <h5>红粉宝宝整形</h5>
        <div class="reg-main">
            <p class="title">找回密码</p>
            <div class="phone"><span>邮箱：</span><input type="text" placeholder="长度2~20个字符"><a href="javascript:;">请输入正确的手机号</a></div>
            <div class="reg"><button>确认发送验证码</button></div>
            <div class="already">手机密码找回</div>
            <div class="line"></div>
            <div class="reg-login">
                <p class="reg-login-tit">您还可以用以下方式登录</p>
                <ul>
                    <li><img src="../Login/img/weibo.png" alt=""><p>微博登录</p></li>
                    <li><img src="../Login/img/QQ.png" alt=""><p>微博登录</p></li>
                    <li><img src="../Login/img/weixin.png" alt=""><p>微博登录</p></li>
                </ul>
            </div>
        </div>
        </div>
        <bottom-icon></bottom-icon>
        <Footer>
            <page-footer></page-footer>
        </Footer>
    </div>

</template>

<script>
    import BottomIcon from '../../components/BottomIcon/'
    import PageFooter from '../../components/Footer/'
    import HeaderMenu from '@/components/Header/'
    export default {
        name: "emailPassword",
        components:{
            BottomIcon,
            PageFooter,
            HeaderMenu
        }
    }
</script>

<style lang="less">
    .cont{
        background-color: #FE91A5;
        padding-bottom: 53px;
    h5{
        color: #fff;
        background-color: #FE91A5;
        font-size: 28px;
        text-align: center;
        padding: 64px 0 24px 0;
    }
    .reg-main{
        width: 1200px;
        margin: 0 auto;
        text-align: center;
        background-color: #fff;
        border-radius: 6px;
    }
    .title{
        font-size: 16px;
        color: #333333;
        padding: 34px 0 23px 0;
    }
    .phone{
        margin-left: 58px;
    }
    .phone span{
        font-size: 14px;
        color: #333333;
        margin-right: 13px;
    }
    .reg-main input{
        padding-left: 10px;
    }
    .phone input{
        width: 228px;
        height: 32px;
    }

    .phone a{
        font-size: 12px;
        color: #ff5371;
        margin-left: 13px;
    }

    .already{
        margin: 13px 0 36px 156px;
        color:#ff8c25;
    }
    .reg button{
        outline: none;
        border: none;
        color: #fff;
        width: 228px;
        height: 40px;
        background-color: #ff5371;
        border-radius: 4px;
        font-size: 20px;
        margin: 22px 0 0 -5px;
    }
    .protocol{
        margin: 14px 0 49px 0;
    }
    .protocol a{
        color: #FE5371;
    }
    .line{
        width: 600px;
        margin: 0 auto;
        border: .5px solid #f0f0f0;
    }
    .reg-login{
        width: 300px;
        height: 204px;
        margin: 0 auto;
        overflow: hidden;
    }
    .reg-login .reg-login-tit{
        color: #333333;
        font-size: 16px;
        margin: 29px 0 27px 0;
    }
    .reg-login ul li{
        float: left;
    }
    .reg-login ul li p{
        margin-top: 3px;
    }
    .reg-login ul li:nth-child(2){
        margin: 0 58px;
    }
    }
</style>